<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        width: 100px;
        height: 100px;
        background: red;
        display: block;
      }
      .box2 {
        width: 100px;
        height: 100px;
        background: blue;
        display: none;
      }
      .box3 {
        width: 100px;
        height: 100px;
        background: yellow;
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="contaner">
      <button>按钮一</button>
      <button>按钮二</button>
      <button>按钮三</button>
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      </div>
      <button class="btn">下一页</button>
      <div class="contaner1">
        <button>按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        </div>

      <script>
        function fn(a, b) {
          a.forEach((item, key) => {
            item.onclick = function () {
              b.forEach((div, kee) => {
                if (key == kee) {
                  div.style.display = "block";
                } else {
                  div.style.display = "none";
                }
              });
            };
          });
        }
        let buts = document.querySelectorAll("button");
        let divs = document.querySelectorAll(".contaner div");
        fn(buts, divs);
        let buts1 = document.querySelectorAll(".contaner1 button");
        let divs1 = document.querySelectorAll(".contaner1 div");
        fn(buts1, divs1);
        //
        var btnEle=document.querySelector(".btn")
        btnEle.onclick=function(){


        }

      </script>
    </div>
  </body>
</html>
